<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>快捷导航菜单的显示与隐藏</title>
<link href="css/z_public_style_0201.css" type="text/css" rel="stylesheet" />
<link href="css/z_index_style2.css" type="text/css" rel="stylesheet" />

<style>
#l_layout {
	min-height: 700px;
	padding-bottom: 10px;
	margin: 0px auto;
	width: 990px;
	height: 900px
}
.tm_kj {
	z-index: 100;
	right: 10px;
	overflow: hidden;
	width: 96px;
	cursor: pointer;
	bottom: 5px;
	position: fixed;
	opacity: 1
}
.kj_con {
	overflow: hidden;
	width: 94px;
	border: 1px solid #e6e6e6;
}
.kj_con1 {
	background: url(images/kj_06.gif) no-repeat left top;
	width: 94px;
	height: 36px
}
.kj_con2 {
	background: url(images/kj_06.gif) no-repeat left -36px;
	width: 94px;
	height: 36px
}
.kj_con3 {
	background: url(images/kj_06.gif) no-repeat left -72px;
	width: 94px;
	height: 36px
}
.kj_con4 {
	background: url(images/kj_06.gif) no-repeat left -108px;
	width: 94px;
	height: 36px
}
.kj_con4_2 {
	background: url(images/kj2_06.gif) no-repeat left -108px;
	width: 94px;
	height: 36px
}
.kj_con5 {
	background: url(images/kj_06.gif) no-repeat left -318px;
	width: 94px;
	height: 31px
}
.kj_dh {
	font-size: 12px;
	width: 94px;
	color: #666
}
</style>
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
</head>
<body>

<div id="l_layout"></div>

<div class="tm_kj" id="tm_kj" style="display: none; ">
  <div class="kj_con">
    <div class="kj_con1" id="shopCarDiv"></div>
    <div class="kj_con2"></div>
    <div class="kj_con3"></div>
    <div class="kj_con4_2" id="kj_con4"></div>
    <div class="kj_dh" id="kj_dh">
      <a class="kj_dh1" href="">护肤</a> 
      <a class="kj_dh2" href="">彩妆</a> 
      <a class="kj_dh3" href="">香水</a> 
      <a class="kj_dh4" href="">美发</a> 
      <a class="kj_dh5" href="">护理</a> 
      <a class="kj_dh6" href="">男士</a> 
    </div>
    <div class="kj_con5" id="kj_con5"></div>
  </div>
  <div class="clear1"></div>
</div>

<script type="text/javascript">
//*******快捷导航*****
$(function ()
{
  var scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollHeight <= 0){
    $("#tm_kj").css("display", "none");  }
  //分类导航
  $("#kj_con4").click(function () {
    if ($("#kj_dh").css("display") == "block"){
      $("#kj_dh").css("display", "none");
      $("#kj_con4").removeClass("kj_con4_2");
      $("#kj_con4").addClass("kj_con4"); }
    else{
      $("#kj_dh").css("display", "block");
      $("#kj_con4").removeClass("kj_con4");
      $("#kj_con4").addClass("kj_con4_2"); }
  });
  //回到顶部
  $("#kj_con5").click(function () {
    $(window).scrollTop(0);
    return false;
  });
  //滚动条滚动
  $(window).scroll(mouseScroll);
  function mouseScroll() {
    var scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
    if (scrollHeight > 0) {
      $("#tm_kj").animate({ opacity: 'show' }, "slow"); }
    else {
      if ($("#tm_kj").css("display") == "block") {
        $("#tm_kj").animate({ opacity: 'toggle' }, "slow", 
		   function () { $("#tm_kj").css("display", "none") }); }
     }
  }
})
</script>

</body>
</html>
